<script setup lang="ts">
import { reactive, ref } from "vue";
import { addShops, getResidentialList } from "@/api/property";
import { ElNotification } from "element-plus";

defineOptions({
  name: "shopsEdit"
});

const formData = reactive({
  id: null,
  residential_id: null,
  address: null,
  area: null
});
const resetForm = () => {
  formData.id = null;
  formData.residential_id = null;
  formData.address = null;
  formData.area = null;
};
const residentialList = ref();
const rules = {
  residential_id: [{ required: true, message: "归属小区不得为空", trigger: "blur" }],
  address: [{ required: true, message: "商铺地址不得为空", trigger: "blur" }],
  area: [{ required: true, message: "商铺面积不得为空", trigger: "blur" }]
};
//初始化数据
const onSearch = () => {
  getResidentialList().then(res => {
    residentialList.value = res.data.records;
  });
};
//添加
const add = () => {
  addShops({ residentialId: formData.residential_id, address: formData.address, area: formData.area }).then(res => {
    ElNotification({
      title: "Success",
      message: res.msg,
      type: "success"
    });
  }).catch(res => {
    ElNotification({
      title: "Error",
      message: res.msg,
      type: "error"
    });
  });
};
onSearch();
</script>

<template>
  <div>
    <el-row justify="center" :gutter="12">
      <el-col :span="12">
        <el-form
          ref="formRef"
          label-position="top"
          label-width="auto"
          :model="formData"
          style="max-width: 600px"
          :rules="rules"
        >
          <el-form-item label="商铺地址" prop="address">
            <el-input v-model="formData.address" />
          </el-form-item>
          <el-form-item label="商铺面积" prop="area">
            <el-input v-model="formData.area" />
          </el-form-item>
          <el-form-item label="归属小区" prop="residential_id">
            <el-select
              v-model="formData.residential_id"
              placeholder="选择小区"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in residentialList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div style="text-align: center">
              <el-button type="primary" @click="add"
              >提交
              </el-button>
              <el-button @click="resetForm()">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">

</style>
